<template>
	<view class="content" :style="{background:$store.state.bgPrimaryColor}">
		<!-- <view class="headers">
			<scroll-view :scroll-top="scrollTop" :scroll-x="true" class="view" v-for="(item,i) in dateArray" :key="i">
				<view>
					<text class="week" :style="{color:item.is_check ? $store.state.primaryColor : '#333'}">{{ item.week }}</text>
					<text :class="[item.is_check ? 'sun1' : 'sun']"  @click="getDay(item,i)"
					:style="{color:item.is_check ? $store.state.primaryColor : '#333'}">{{ item.day < 10 ? `0${item.day}` : item.day}}</text>
					<text :style="{backgroundColor:item.is_check ? $store.state.primaryColor : 'transparent'}" class="borderBottom"></text>
				</view>
			</scroll-view>
		</view> -->
		<view class="headers_title" style="margin-top:0rpx;">
			<view class="view" :style="{backgroundColor:$store.state.primaryColor}"></view>
			<text>老师展示</text>
		</view>
		<view class="scrollBody">
			<view class="" style="display: flex;justify-content: space-between;">
				<view class="scroll_headers">
					<view v-for="(item,index) in columns" :key="index" class="Flex" style="margin-right: 74rpx;"
						@click="getActive(item,index)">
						<text :style="{color:index == active ? $store.state.primaryColor : '#4C4C4C',fontWeight:
						index == 0 ? 600 : 500,borderBottom:index == active ? `7rpx solid ${$store.state.primaryColor}` : '7rpx solid transparent',
						paddingBottom:'10rpx'}">{{item.name}}</text>
					</view>
				</view>
				<u--image :showLoading="true" src="../../../static/more.png" style="margin-top: 36rpx;" width="28rpx"
					height="28rpx" radius="0"></u--image>
			</view>
			<scroll-view scroll-x="true" class="view">
				<view v-for="(item,index) in lists" :key="index"
					@click="linkUrl(`/pages/detail/Teacher_details?id=${item.id}`)">
					<u--image :showLoading="true" :src="item.avatar" width="94rpx" height="94rpx" radius="0"
						shape="circle" @click="checkImage(item.avatar)"></u--image>
					<text style="overflow:hidden;
						    text-overflow:ellipsis;
						    white-space:nowrap;">{{item.name}}</text>
				</view>
			</scroll-view>
		</view>
		<view class="headers_title NewFlex">
			<view class="flex">
				<view class="view" :style="{backgroundColor:$store.state.primaryColor}"></view>
				<text>课程列表</text>
			</view>
			<!-- 	<view class="flex">
				<text class="time">全部时间</text>
				<u--image :showLoading="true" src="../../../static/more.png" width="28rpx" height="28rpx"
					radius="0"></u--image>
			</view> -->
		</view>
		<!-- 		<view class="Box">
			<view v-for="(item,index) in lists" :key="index" class="BoxView">
				<view class="BoxOne">
					<u--image :showLoading="true" :src="item.avatar" width="94rpx" height="94rpx" radius="0"
						shape="circle" @click="checkImage(item.avatar)"></u--image>
					<view class="BoxContent">
						<view class="BoxTop marginBottom">
							<text class="title">{{item.name}}</text>
							<text style="color:#888888;margin-left:15rpx;">{{item.country.name}}教师</text>
						</view>
						<view class="BoxTop">
							<text class="Newtitle">{{item.speciality}}</text>
						</view>
					</view>
				</view>
				<view class="button_flex">
					<button :style="{'background':$store.state.buttonColor}"
						@click="linkUrl(`/pages/Scheduleaclass/Singleappointment?id=${item.id}&vip_type=${'1,2'}`)">单次预约</button>
					<button :style="{'background':$store.state.buttonColor}"
						@click="linkUrl(`/pages/Mine/Fixedappointment?id=${item.id}&type=1v1&title=switch&vip_type=${2}`)">1V1固定预约</button>
					<button :style="{'background':$store.state.buttonColor}"
						@click="linkUrl(`/pages/Mine/Fixedappointment?id=${item.id}&type=1v1&title=switch&vip_type=${3}`)">1V2固定预约</button>
				</view>
			</view>
		</view> -->
		<view class="listsItem">
			<view v-for="(item, index) in courseList" :key="item.id" class="listsVfor"
				@click="linkUrl(`/pages/detail/Tutorial_details?id=${item.id}`)">
				<view class="listsTop">
					<u--image :showLoading="true" :src="item.image" width="158rpx" height="156rpx" radius="20"
						mode="aspectFit"></u--image>
					<view class="lists_right">
						<view class="lists_">
							<view>
								<view class="lists_name">
									<!-- {{ item.type == 1 ? '正式课' : '试听课' }} -->
									<text>{{ item.name || '' }}</text>
								</view>
							</view>
						</view>
						<view class="NewFlex">
							<view class="lists_illustrate">
								<!-- 	<u--image :showLoading="true" src="../../../static/vip.png" width="30rpx" height="24rpx"
									radius="0"></u--image> -->
								<text>日期：{{item.date}}</text>
								<text>上课时间：{{item.start_time}}-{{item.end_time}}</text>
							</view>
							<!-- <text :style="{ color: $store.state.primaryColor }">￥{{ item.salesprice || '' }}</text> -->
							<view class="listBottom">
								<u-button text="查看" shape="circle"
									:style="{ background: $store.state.buttonColor }"></u-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tips">
			<text class="title">温馨提示</text>
			<view class="viewFlex">
				<view class="view">
					<u--image :showLoading="true" src="../../../static/more.png" width="22rpx" height="22rpx"
						radius="0"></u--image>
					<text>上课迟到或缺席依然记入课时</text>
				</view>
				<view class="view">
					<u--image :showLoading="true" src="../../../static/more.png" width="22rpx" height="22rpx"
						radius="0"></u--image>
					<text>预约课程请提前3小时</text>
				</view>
				<view class="view">
					<u--image :showLoading="true" src="../../../static/more.png" width="22rpx" height="22rpx"
						radius="0"></u--image>
					<text>取消预约请提前12小时</text>
				</view>
				<view class="view">
					<u--image :showLoading="true" src="../../../static/more.png" width="22rpx" height="22rpx"
						radius="0"></u--image>
					<text>请准时进入教室，不要提前进入教室，因为会影响到其他学生上课</text>
				</view>
				<view class="view">
					<u--image :showLoading="true" src="../../../static/more.png" width="22rpx" height="22rpx"
						radius="0"></u--image>
					<text>课程中如有特殊情况请及时联系管理员</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import moment from 'moment';
	import {
		teacherLists,
		collectTeacher,
		teacher_category,
		teacherCountry,
		getJsSdk
	} from '../../../api/Teacher.js';
	import {
		getCourseList
	} from '../../../api/Home.js';
	import jWeixin from '../../../js_sdk/jweixin-module';
	export default {
		data() {
			return {
				columns: [{
					name: '全部',
					id: 0
				}], //学习语种数据源
				choose_index: 0,
				active: 0,
				dateArray: [],
				scrollTop: 0,
				time: '',
				courses: [{
					name: '全部'
				}, {
					name: '英语'
				}, {
					name: '法语'
				}, {
					name: '俄语'
				}],
				req: {
					teacher_id: 0,
					shop_id: 0,
					user_vip_id: 1,
					date: '',
					start_time: ''
				},
				lists: {},
				courseList: [], //课程列表
				currentPage: 1, //当前页码
				totalPage: 1, //课程列表的总页数
			}
		},
		mounted() {
			this.share();
			this.generateDateArray();
		},
		onLoad() {
			this.teacher_category();
			this.teacherLists();
			this.req.shop_id = uni.getStorageSync('shop_id') ?? 1;
			this.getCourseList()
		},
		onReachBottom() {
			console.log("触底加载", this.currentPage)
			if (this.totalPage > this.currentPage) {
				this.currentPage += 1
				this.getCourseList()
			}
		},
		methods: {
			checkImage(url) {
				uni.previewImage({
					urls: [url]
				});
			},
			/**
			@method 分享
			**/
			async share() {
				try {
					var th_is = this;
					const res = await getJsSdk({
						url: '/pages/Tabbar/Scheduleaclass/Scheduleaclass'
					});
					jWeixin.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: res.data["appId"], // 必填，公众号的唯一标识
						timestamp: res.data["timestamp"], // 必填，生成签名的时间戳
						nonceStr: res.data["nonceStr"], // 必填，生成签名的随机串
						signature: res.data["signature"], // 必填，签名
						jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"] // 必填，需要使用的JS接口列表
					});
					jWeixin.ready(function() {
						// 分享给朋友
						jWeixin.updateAppMessageShareData({
							title: "约课", // 分享标题
							desc: "邀请您参加预约课程", // 分享描述
							link: window.location.href, // 分享链接
							imgUrl: '', // 分享图标
							type: 'link', // 分享类型,music、video或link，不填默认为link
							success: function() {
								// 分享成功回调
							}
						});
						// 分享到朋友圈
						jWeixin.updateTimelineShareData({
							title: "约课", // 分享标题
							desc: "邀请您参加预约课程", // 分享描述
							link: window.location.href, // 分享链接
							imgUrl: '', // 分享图标
							success: function() {
								// 分享成功回调
							}
						});
					});
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			getActive(item, index) {
				this.active = index;
				this.teacherLists(item.id);
			},
			/**
			@method 老师列表
			**/
			async teacherLists(id = '') {
				try {
					const res = await teacherLists({
						teacher_category_id: id,
						shop_id: uni.getStorageSync('shop_id') ?? 1,
						page: 1,
						limit: 999
					});
					this.lists = [...res.data.data];
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 老师分类
			**/
			async teacher_category() {
				try {
					const res = await teacher_category();
					this.columns = [...this.columns, ...res.data];
					console.log(this.columns)
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			generateDateArray() {
				const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
				const startDate = moment(); // 今天的日期
				const endDate = moment().add(6, 'months'); // 半年后的日期
				const dateArray = [];
				let currentDate = startDate;
				let i = 0;
				while ((currentDate.isBefore(endDate) || currentDate.isSame(endDate, 'day')) && i < 10) {
					dateArray.push({
						day: currentDate.date(),
						week: weekDays[currentDate.day()],
						date: currentDate.year() + '-' + (currentDate.month() + 1) + '-' + currentDate.date(),
						is_check: 0
					});
					currentDate = currentDate.add(1, 'day'); // 增加一天
					i++;
				}
				dateArray[0].is_check = 1;
				this.dateArray = dateArray;
			},
			getDay(item, i) {
				console.log(item);
				this.dateArray[this.choose_index].is_check = 0;
				this.dateArray[i].is_check = 1;
				this.choose_index = i;
				this.req.date = item.date;
				//this.teacher_info(this.req.teacher_id,this.req.date)
			},
			linkUrl(e) {
				uni.navigateTo({
					url: e
				});
			},
			/**
			 * @method 获取课程列表
			 */
			async getCourseList() {
				try {
					const res = await getCourseList({
						shop_id: uni.getStorageSync('shop_id'),
						page: this.currentPage,
						pagesize: 10,
					});
					this.courseList = [...res.data.data];
					this.totalPage = res.data.total
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
	}
</style>
<style scoped lang="scss">
	button::after {
		border: none;
	}

	.content {
		width: auto;
		// height: 30vh;
		padding: 30rpx;

		// position: relative;
		.borderBottom {
			width: 26rpx;
			height: 8rpx;
			margin: 0px auto;
			margin-top: 10rpx;
			display: block;
			border-radius: 50rpx;
		}

		.tips {
			width: auto;
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			padding: 30rpx;
			margin-top: 20rpx;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #000000;
				white-space: nowrap;
			}

			.viewFlex {
				width: auto;
				margin-left: 10rpx;

				.view {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #666666;
						letter-spacing: 2rpx;
					}
				}
			}
		}

		.Box {
			.BoxView {
				width: auto;
				margin: 0px auto;
				border-radius: 20rpx;
				padding: 30rpx 30rpx 30rpx 30rpx;
				margin-top: 20rpx;
				// display: flex;
				// justify-content: space-between;
				// align-items: center;
				background-color: rgba(255, 255, 255, 0.8);
			}

			.button_flex {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 20rpx;
			}

			.BoxOne {
				display: flex;
				align-items: center;

				.marginBottom {
					margin-bottom: 10rpx;
				}

				.BoxTop {
					margin-left: 20rpx;
					display: flex;
					align-items: center;

					text {
						display: block;
						font-size: 24rpx;
					}

					.title {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 32rpx;
						color: #333333;
						font-style: normal;
					}

					.Newtitle {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;
						font-style: normal;
					}
				}
			}

			button {
				width: auto;
				height: 50rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				border-radius: 46rpx;
				margin: 0px;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				border: none;
			}
		}

		.scrollBody {
			background-image: url('../../../static/yuekeback.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			// background: linear-gradient( 180deg, #E1F7FF 0%, #FFFFFF 100%);
			// background: linear-gradient( 180deg, #FFE3CD 0%, #F7F7F7 100%);
			// background: linear-gradient( 180deg, #FFEEE1 0%, #FFFFFF 100%);
			border-radius: 16rpx;
			// border: 2rpx solid #FFEADB;
			background: #FFFFFF;
			margin-top: 20rpx;
			padding: 0rpx 30rpx 40rpx 30rpx;
			background-color: rgba(255, 255, 255, 0.5); // 设置背景颜色为白色，透明度为0.5

			.scroll_headers {
				width: auto;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.Flex {
					text {
						color: #4C4C4C;
					}
				}
			}

			.view {
				width: 100%;
				white-space: nowrap;
				margin-top: 30rpx;

				view {
					width: 130rpx;
					display: inline-block;
					margin-right: 20rpx;

					/deep/ .u-image {
						display: block;
						margin: 0px auto;
					}

					text {
						display: block;
						text-align: center;
					}
				}
			}
		}

		.headers {
			width: auto;
			border-radius: 20rpx;
			padding: 20rpx 20rpx 15rpx 20rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30rpx;
			box-shadow: 0rpx 6rpx 24rpx 0rpx rgba(218, 218, 218, 0.5);
			overflow: scroll;
			white-space: nowrap;

			.view {
				width: 100%;
				white-space: nowrap;

				.week {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 24rpx;
					color: #333333;
				}

				.sun {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
					margin-top: 10rpx;
				}

				.sun1 {
					// background: linear-gradient( 270deg, #3078FF 0%, #009DFE 100%);
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
					margin-top: 10rpx;
				}

				view {
					width: 50rpx;
					display: inline-block;
					white-space: nowrap;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					// border:1px solid red;
					padding-left: 10rpx;
					padding-right: 10rpx;
					flex-direction: column;

					text {
						display: inline-block;
						text-align: center;
					}
				}
			}
		}

		.NewFlex {
			justify-content: space-between;

			/deep/ .u-image {
				margin-left: 10rpx;
			}

			.time {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #4C4C4C;
			}
		}

		.headers_title {
			width: auto;
			margin: 0px auto;
			display: flex;
			align-items: center;
			margin-top: 40rpx;

			.view {
				width: 10rpx;
				height: 34rpx;
				background: #029CFE;
				border-radius: 6rpx;
			}

			.flex {
				display: flex;
				align-items: center;
			}

			text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #333333;
				margin-left: 10rpx;
			}
		}

		.listsItem {
			margin-top: 20rpx;

			.listsVfor {
				width: 95%;
				margin: 0px auto;
				margin-bottom: 30rpx;
				padding-bottom: 30rpx;
				background-color: #fff;
				padding-top: 30rpx;
				padding-left: 30rpx;
				border-radius: 32rpx;

				.listsTop {
					width: 100%;
					display: flex;
				}

				image {
					width: 190rpx;
					min-width: 190rpx;
					height: 200rpx;
					border-radius: 15rpx;
				}

				.lists_right {
					width: 70%;
					padding-left: 20rpx;

					// border:1px solid greenyellow;
					.lists_ {
						width: auto;
						// border:1px solid red;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.listsAddress {
							text {
								display: block;
								font-size: 20rpx;
								color: #b5b5b5;
								text-align: right;
								margin-bottom: 5rpx;
							}
						}
					}

					.lists_name {
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;

						text {
							font-size: 28rpx;
							font-weight: 500;
							color: #000000;
						}
					}

					.lists_tag {
						display: flex;
						align-items: center;
						margin-top: 15rpx;

						/deep/ .u-tag--warning--plain {
							border-color: #c3c3c3;
							margin-right: 20rpx;
						}

						/deep/ .u-tag--mini {
							margin-right: 20rpx;
						}

						/deep/ .u-tag-wrapper {
							margin-right: 10rpx;
						}
					}

					.u_flex {
						margin-top: 5rpx;

						view {
							text {
								color: #000000;
								display: block;
								font-size: 24rpx;
								font-weight: 500;
								margin-left: 10rpx;
								margin-bottom: 5rpx;
							}
						}
					}

					.NewFlex {
						display: flex;
						align-items: center;
						justify-content: flex-end;

						// margin-top: 30rpx;
						.lists_illustrate {
							width: 80%;
							font-size: 22rpx;
							display: flex;
							flex-direction: column;
							color: #888888;
						}

						text {
							// font-family: PingFangSC, PingFang SC;
							font-size: 28rpx;
							text-align: left;
							font-style: normal;
						}
					}
				}
			}

			.listBottom {
				/deep/ .u-button {
					width: 165rpx;
					height: 60rpx;
					margin: 0px;
					color: #fff;
					// background-color:#2381fe;
					border: none;
					font-size: 20rpx;
					letter-spacing: 1px;
				}
			}
		}
	}
</style>